<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.orderId" placeholder="采购单ID" style="width: 200px;" class="filter-item" @keyup.enter.native="btnQuery" />
      <el-input v-model="listQuery.supplierId" placeholder="供应商ID" style="width: 200px;" class="filter-item" @keyup.enter.native="btnQuery" />
      <el-input v-model="listQuery.materialId" placeholder="物料ID" style="width: 200px;" class="filter-item" @keyup.enter.native="btnQuery" />
      <el-dropdown split-button type="primary" class="filter-item" @click="btnQuery">
        <i class="el-icon-search el-icon--left" />查询
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item icon="el-icon-zoom-out" @click.native="btnReset">重置</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-button-group>
        <el-button v-permission="'purchase:orderDetail:save'" icon="el-icon-plus" type="primary" class="filter-item" @click="btnCreate">新增</el-button>
        <el-button v-permission="'purchase:orderDetail:delete'" icon="el-icon-delete" class="filter-item" @click="btnDelete()">批量删除</el-button>
      </el-button-group>
    </div>
    <el-table
      ref="multipleTable"
      :data="records"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      :cell-style="{padding:'3px'}"
      @selection-change="selectionChange"
    >
      <el-table-column type="selection" align="center" />
      <el-table-column label="采购单ID" prop="orderId" align="center"><template slot-scope="scope"><span>{{ scope.row.orderId }}</span></template></el-table-column>
      <el-table-column label="供应商ID" prop="supplierId" align="center"><template slot-scope="scope"><span>{{ scope.row.supplierId }}</span></template></el-table-column>
      <el-table-column label="物料ID" prop="materialId" align="center"><template slot-scope="scope"><span>{{ scope.row.materialId }}</span></template></el-table-column>
      <el-table-column label="数量" prop="materialNum" align="center"><template slot-scope="scope"><span>{{ scope.row.materialNum }}</span></template></el-table-column>
      <el-table-column label="备注" prop="comment" align="center"><template slot-scope="scope"><span>{{ scope.row.comment }}</span></template></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="{row}">
          <el-dropdown>
            <span class="el-dropdown-link">操作<i class="el-icon-arrow-down el-icon--right" /></span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-view" @click.native="btnView(row)">查看</el-dropdown-item>
              <el-dropdown-item v-permission="'purchase:orderDetail:update'" icon="el-icon-edit" divided @click.native="btnUpdate(row)">修改</el-dropdown-item>
              <el-dropdown-item v-permission="'purchase:orderDetail:delete'" icon="el-icon-delete" divided @click.native="btnDelete(row.id)">删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :current.sync="listQuery.current"
      :size.sync="listQuery.size"
      @pagination="list"
    />

    <el-dialog title="" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :rules="rules" :model="temp" :disabled="dialogStatus==='view'" label-position="right" label-width="110px">
        <el-form-item label="ID" prop="id"><el-input v-model="temp.id" :readonly="dialogStatus==='update'" /></el-form-item>
        <el-form-item label="采购单ID" prop="orderId"><el-input v-model="temp.orderId" /></el-form-item>
        <el-form-item label="供应商ID" prop="supplierId"><el-input v-model="temp.supplierId" /></el-form-item>
        <el-form-item label="物料ID" prop="materialId"><el-input v-model="temp.materialId" /></el-form-item>
        <el-form-item label="数量" prop="materialNum"><el-input v-model="temp.materialNum" /></el-form-item>
        <el-form-item label="备注" prop="comment"><el-input v-model="temp.comment" /></el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button icon="el-icon-close" @click="dialogFormVisible = false">取消</el-button>
        <el-button v-if="dialogStatus!=='view'" icon="el-icon-check" type="primary" @click="dialogStatus==='create'?createData():updateData()">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { getAction, putAction, postAction, deleteAction } from '@/api/manage'
import { Message } from 'element-ui'

export default {
  name: 'PurchaseOrderDetail',
  components: { Pagination },
  data() {
    return {
      dicts: [],
      records: null,
      selectedRecords: [],
      total: 0,
      listQuery: {
        current: 1,
        size: 10,
        orderId: undefined,
        supplierId: undefined,
        materialId: undefined
      },
      dialogFormVisible: false,
      dialogStatus: '',
      temp: {
        id: undefined,
        orderId: '',
        supplierId: '',
        materialId: '',
        materialNum: '',
        comment: ''
      },
      rules: {
        id: [{ required: true, message: '该项不能为空', trigger: 'change' }],
        orderId: [{ required: true, message: '该项不能为空', trigger: 'change' }],
        supplierId: [{ required: true, message: '该项不能为空', trigger: 'change' }],
        materialId: [{ required: true, message: '该项不能为空', trigger: 'change' }],
        materialNum: [{ required: true, message: '该项不能为空', trigger: 'change' }]
      }
    }
  },
  beforeCreate() {

  },
  created() {
    this.list()
  },
  methods: {
    list() {
      getAction('/purchase/orderDetail/list', this.listQuery).then(res => {
        const { data } = res
        this.records = data.records
        this.total = data.total
      })
    },
    btnQuery() {
      this.listQuery.current = 1
      this.list()
    },
    btnReset() {
      this.listQuery = {
        current: 1,
        size: 10,
        orderId: undefined,
        supplierId: undefined,
        materialId: undefined
      }
      this.list()
    },
    resetTemp() {
      this.temp = {
        id: undefined,
        orderId: '',
        supplierId: '',
        materialId: '',
        materialNum: '',
        comment: ''
      }
    },
    btnView(row) {
      this.temp = Object.assign({}, row)
      this.dialogStatus = 'view'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    btnCreate() {
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          postAction('/purchase/orderDetail/save', this.temp).then(({ msg }) => {
            this.dialogFormVisible = false
            Message.success(msg)
            this.list()
          })
        }
      })
    },
    btnUpdate(row) {
      this.temp = Object.assign({}, row)
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          putAction('/purchase/orderDetail/update', this.temp).then(({ msg }) => {
            this.dialogFormVisible = false
            Message.success(msg)
            this.list()
          })
        }
      })
    },
    btnDelete(id) {
      const ids = id ? [id] : this.selectedRecords.map(record => {
        return record.id
      })
      if (ids.length === 0) {
        Message.error('请选择要删除的记录')
        return
      }
      deleteAction('/purchase/orderDetail/delete', { ids: ids.toString() }).then(({ msg }) => {
        Message.success(msg)
        this.list()
      })
    },
    selectionChange(selectedRecords) {
      this.selectedRecords = selectedRecords
    }
  }
}
</script>
